<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName()
            + ":" + request.getServerPort() + request.getContextPath() + "/";

    //通过字符串拼接方式完成指定<base>标签内容的拼接
%>
<html>
<head>
    <title>商城首页</title>
    <base href="<%=basePath%>"/>
    <script src="/reiCode/js/jquery-3.5.1.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/shopindex.css">
    <script>
        function addgoodintocart(goodid) {
            if (confirm("您要将此商品加入购物车吗?")) {
                $.ajax({
                    url: "${pageContext.request.contextPath}/cart/addgoodintocart.do",
                    type: "get",
                    dataType: "text",
                    data: {"goodid": goodid, "username": "${sessionScope.username}"},
                    success: function (msg) {
                        alert(msg);
                        location.reload();
                    }
                })
            }
        }

        function buygoodnow(goodid) {
            if (confirm("您确定要购买该商品吗?")) {
                window.location.href = "${pageContext.request.contextPath}/transaction/creattransactionfromshop.do?goodid=" + goodid + "&username=${sessionScope.username}&quantity=" + 1
                //这里对quantity的数值尚未做处理,需要后期添加可以控制数量的input标签
            }
        }
    </script>
</head>
<body>
<div class="majorcontainer">
    <c:forEach items="${allgoods}" var="g">
        <div class="container">
            <div class="image">
                <img src="image/shark.jpg" alt="示例图片">
            </div>
            <div class="card-content">
                <div class="wrapper">
                    <div class="title">${g.goodname}</div>
                    <p>${g.goodintro}</p>
                    <span class="price">￥${g.goodprice}</span>

                    <div class="range">
                        <div class="sliderValue">
                            <span id="span">100</span>
                        </div>
                        <div class="field">
                            <div class="value left">
                                1
                            </div>
                            <input type="range" min="1" max="100" value="50" steps="1" name="quantity" id="range">
                            <div class="value right">
                                100
                            </div>
                        </div>
                    </div>

                    <div class="btns">
                        <button onclick="buygoodnow(${g.goodid})">Buy now</button>
                        <button onclick="addgoodintocart(${g.goodid})">Add to cart</button>
                    </div>
                </div>
            </div>
        </div>
    </c:forEach>

    <script>
        const slideValue = document.querySelector("#span");
        const inputSlider = document.querySelector("#range");
        inputSlider.oninput = (() => {
            let value = inputSlider.value;
            slideValue.textContent = value;
            slideValue.style.left = value + "%";
            slideValue.classList.add("show");
        });
        inputSlider.onblur = (() => {
            slideValue.classList.remove("show");
        });
    </script>

</div>
</body>
</html>
